<template>
  <div class="register-list" v-loading="isregist">
    <el-row class="el-title">
      <el-col :span="4">今日注册</el-col>
      <el-col :span="4"
        >注册人数:<span>{{ registernumber }}</span></el-col
      >
    </el-row>
    <el-row>
      <el-col :span="24" class="el-table-body">
        <el-table
          class="hd-table"
          style="width: 95%"
          height="250px"
          :data="registerlist"
          :row-style="{ height: '50px' }"
          :header-cell-style="{ background: '#ebf8f8' }"
          :row-class-name="tableRowClassName"
          border
          stripe
        >
          <el-table-column label="用户名" width="180">
            <template #default="scope">
              <div style="margin-left: 10px">{{ scope.row.usernumber }}</div>
            </template>
          </el-table-column>
          <el-table-column label="注册时间" width="180">
            <template #default="scope">
              <div style="margin-left: 10px">{{ scope.row.registertime }}</div>
            </template>
          </el-table-column>
          <el-table-column label="用户Id">
            <template #default="scope">
              <div style="margin-left: 10px">{{ scope.row.userid }}</div>
            </template>
          </el-table-column></el-table
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import { ref } from "vue";
import { getuserlen } from "network/request.js";

export default {
  data() {
    return {
      // alluserlist: [],
      registerlist: [],
      isregist: false,
      registernumber: 0,
    //   timers: null,
    //   table: ref(null),
    };
  },
  created() {
    this.isregist = true;
    let nowday = new Date();
    nowday = nowday.toLocaleDateString();
    console.log(nowday);
    getuserlen().then(({ data: res }) => {
      res.forEach((item) => {
        // this.alluserlist.push(item)
        let regitime = item.registertime.split(" ")[0];
        if (regitime == nowday) {
        //   for (let i = 0; i < 10; i++) {
            this.registerlist.push(item);
        //   }
          this.registernumber++;
        }
        // registertime = registertime.
      });
      setTimeout(() => {
        this.isregist = false;
      }, 500);
    });
  },
  mounted() {
  },
  methods: {},
  beforeUnmount() {
  },
};
</script>

<style scoped lang="scss">
.register-list {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 10px;
}
.el-title {
  font-weight: 700;
  letter-spacing: 2px;
  font-family: "Microsoft YaHei";
  color: #008ada;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.el-table-body {
  //   border: 1px solid #ccc;
  /deep/ .el-table {
    background-color: #fff;
    color: #000;
    margin: 0 auto;
    font-weight: 600;
    th {
      background-color: #fff;
    }
    tr {
      color: #000;
      background-color: #fff;
      &.el-table__row--striped {
        td.el-table__cell {
          background-color: #fff;
        }
      }
      &:hover {
        td.el-table__cell {
          background-color: #fffccc;
        }
      }
    }
  }
  //   .el-table {
  //     margin: 0 auto;
  //     font-weight: 600;
  //     // background-color: red;
  //   }
}
</style>